
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
<div class="father">
    <h1>表白墙</h1>
    <p>输入点击后提交，结果将显示在墙上</p>
    <div class="line">
        <span>谁</span><input type="text" class="text">
    </div>
    <div class="line">
        <span>对谁说</span><input type="text" class="text">
    </div>
    <div class="line">
        <span>说什么</span>
        <input type="text" class="text">
    </div>
    <div class="but">
        <button>提交</button>
    </div>


    <style>
        .father{
            background-color:green;
            width:60%;
            margin:0 auto;
            box-sizing:border-box;
        }
        h1{
            /* 这里把h2标签当成一个字体，让字体水平居中，就要用到text-align */
            text-align: center;
            /* 这是设置内边距，也就是说设置字体和背景颜色顶部的距离 */
            padding:5px 0;
        }
        p{
            /* 控制P标签里面的字水平居中 */
            text-align:center;
            padding:5px 0;
        }
        .line{
            /* 设置每一行的元素，水平居中，垂直居中 */
            height:50px;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        span{
            font-size:25px;
            width:120px;
        }
        input{
            height:25px;
        }
        .but{
            display:flex;
        }
        button{
            margin:0 auto;
            width:200px;
        }
    </style>

    <script src="https://releases.jquery.com/git/jquery-git.min.js"></script>
    <script>
    //1 在页面进行重新加载的时候，访问服务器，服务器就会把刚才客户端传输的数据发送回来，也就是说我们从服务器这里面后娶到了消息列表，我们要按照json的格式来解析对象
       function load(){
     //我们可以通过这个函数，从服务上面获取信息，并进行展示
     $.ajax({
        type:"GET",
         url:"confession",
        success:function(data,status){
    //注意这里面的data是发送GET请求之后的相应的body,接下来我们就需要解析这个body字符串，并把这些元素想办法加到DOM树上面，并在屏幕上显示

    //下面的过程就是解析JSON字符串的过程
    let arr1=data;
    for(let message of arr1)
    {     let father=document.querySelector(".father");
        let line=document.createElement("div");
        line.className="line";
        line.innerHTML=message.from+"对"+message.to+"说"+message.message;
        father.appendChild(line);
        console.log(1);

    }
         }
     });
       }

       load();
    let button=document.querySelector(".but");
    button.onclick=function()
    {
        //1 先获取到框内元素，每一个输入框里面的内容是一个edits的元素；
                let arr1=document.querySelectorAll(".text");
                console.log(arr1);
        //2 把谁说的话具体分出来，然后再具体进行字符串的拼接
        let from=arr1[0].value;
        let to=arr1[1].value;
        let message=arr1[2].value;
        console.log(from+"对"+to+"说"+message);
        //3 判断输入框内容是否合法
        if(from==""||to==""||message==""){
            return;
        }
        //4创建出一个新的节点
        let newnode=document.createElement("div");
        newnode.className="line";
        newnode.innerHTML=from+"对"+to+"说"+message;
        console.log(newnode);
        //5添加到DOM树上
        let father=document.querySelector(".father");
        father.appendChild(newnode);

        //6 清空输入框
        for(let i=0;i<arr1.length;i++)
        {
            arr1[i].value="";

        }
        //2 构造一个HTTP请求，把当前的提交的数据交给服务器保存
        $.ajax({
            type:"POST",
            url:"confession",
            data:JSON.stringify({from: from, to: to, message: message}),
            success:function(data,status){
                if(data.ok==1)
                {
                    console.log("提交表白墙中的消息成功");
                }else{
                    console.log("提交表白墙的消息失败");
                }

            }
        });

    }
    </script>



</body>
</html>